<template>
  <div>
    <Modal :mask-closable="false"
           v-model="modalState"
           :title="`${$t('common.Import')}`"
           class-name="importExcelModal vertical-center-modal"
           @on-cancel="closeClick"
           :closable="false"
           :footer-hide="true"
           class="modal-wrap-layout"
    >

      <div class="content">
        <div class="upload">
          <div class="importBtn">
            <Upload
                :on-success="upload"
                :on-error="uploadErro"
                :before-upload="beforeUpload"
                :on-progress="onProgress"
                :show-upload-list="false"
                :headers="headers"
                type="drag"
                :max-size="10240"
                :action="action"
            >
              <img src="~images/common/importImg.png" alt/>
            </Upload>
          </div>
          <span>{{ $t('common.importfile') }}</span>
        </div>

        <Progress :percent="uploadProgress"
                  :stroke-width="20"
                  v-show="uploadProgress > 0"
                  status="active"
                  text-inside/>

        <button class="closeBtn" @click="closeClick">{{ $t('common.close') }}</button>
      </div>
    </Modal>
    <Modal :mask-closable="false" class="infoModel" width="550" v-model="infoState" @on-cancel="infoCancel">
      <div class="content">
        <p v-html="infoText"></p>
      </div>
    </Modal>
  </div>
</template>

<script>
const isTong = process.env.NODE_ENV === 'tong';
let ksiot = '/kakone';
if (isTong) {
  ksiot = ''
}
export default {
  name: 'importExcel',
  props: ['importExcelStateF', 'assetsNo', 'isUpdate', 'url'],
  data() {
    return {
      uploadProgress: 0,
      madalUpdate: this.isUpdate,
      modalState: this.importExcelStateF,
      uploadFiles: {},
      headers: {
        token: localStorage.getItem('ziyunFactoryPortalToken'),
      },
      infoState: false,
      infoText: '',
      action: '',
    }
  },
  mounted() {
    if (this.$route.path === '/spareParts/attachmentAccount/account') {//备品台账
      this.action = `${ksiot}/dms/standingBook/importStandingBooks`
    }
    if (this.$route.path === '/spareParts/attachmentProcurement/procurement') {//备品采购
      this.action = `${ksiot}/dms/backup/purchase/importPurchases`
    }
    if (this.$route.path === '/spareParts/dataAdministration/storeHouse') {//仓库配置
      this.action = `${ksiot}/dms/dmsBackupConfig/backupImport`
    }
    if (this.$route.path === '/spareParts/dataAdministration/goodsShelves') {//货架配置
      this.action = `${ksiot}/dms/dmsBackupShelfConfig/backupShelfConfigImport`
    }
    if (this.$route.path === '/spareParts/dataAdministration/location') {//库位配置
      this.action = `${ksiot}/dms/dmsBackupLocationConfig/backupLocationConfigImport`
    }
    if (this.$route.path === '/spareParts/dataAdministration/material') {//物料配置
      this.action = `${ksiot}/dms/dmsBackupMaterielConfig/backupMaterielConfigImport`
    }
    if (this.$route.path === '/devBasic/basicData/deviceDepreciation') {//设备折旧
      this.action = `${ksiot}/dms/assetCategory/import`
    }
    if (this.$route.path === '/userManage') {
      this.action = `${ksiot}/basic/user/import`
    }
    if (this.$route.path === '/cutter/basis/processFlow') {
      this.action = `${ksiot}/tms/tmProcess/import`
    }
    if (this.$route.path === '/cutter/basis/materialConfig') {
      this.action = `${ksiot}/tms/material/import`
    }
    if (this.$route.path === '/cutter/basis/transcode') {
      this.action = `${ksiot}/tms/tmKnifeEncode/import`
    }
    if (this.$route.path === '/cutter/basis/knifeBom') {
      this.action = `${ksiot}/tms/bom/import`
    }
    if (this.$route.path === '/cutter/storage') {
      this.action = `${ksiot}/tms/handle/import`
    }
    if (this.$route.path === '/cutter/productManage/standbyKnifePreserve' && this.importExcelTag === 'bindMachine') {
      this.action = `${ksiot}/tms/bind/import`
    }
    if (this.$route.path === '/dictionaries') {
      this.action = `${ksiot}/dms/dict/import`
    }
    if (this.$route.path === '/cutter/productManage/standbyKnifePreserve' && this.importExcelTag === 'productionTakt') {
      this.action = `${ksiot}/tms/cycle/import`
    }
    if (this.$route.path === '/dncManage/basisData') {
      this.action = `${ksiot}/dncApi/dncBom/import`
    }
    if (this.$route.path === '/fault/basicConfig/faultClassify') { // 故障分类
      this.action = `${ksiot}/dms/faultCategory/import`
    }
    if (this.$route.path === '/fault/basicConfig/faultType') { // 故障类型
      this.action = `${ksiot}/dms/faultType/import`
    }
    if (this.$route.path === '/fault/basicConfig/upgrade') { // 升级机制
      this.action = `${ksiot}/dms/upgrade/import`
    }
    if (this.$route.path === '/productionInterval') { // 生产节拍
      this.action = `${ksiot}/dms/interval/import`
    }
    if (this.$route.path === '/screenManagement') { // 大屏管理
      this.action = `${ksiot}/dms/large/screen/import`
    }
    if (this.$route.path === '/billWithManagement') { // 关账管理
      this.action = `${ksiot}/dms/year/month/import`
    }
    if (this.$route.path === '/docManagement/maintainKnowLedge') { // 维修知识库
      this.action = `${ksiot}/dms/knowledgeBase/importKnowledgeBase`
    }
    if (this.$route.path === '/devBasic/equipmentsLedgerManagement/equipmentsLedger') {
      if (this.madalUpdate == 1) {
        this.action = `${ksiot}/dms/device/import?type=insert`
      } else if (this.madalUpdate == 2) {
        this.action = `${ksiot}/dms/device/import?type=update`
      } else {
        this.action = `${ksiot}/dms/dmsDeviceTz/import`
      }
    }
    if (this.$route.path === '/productionShift') { // 维修知识库
      this.action = `${ksiot}/dms/productionShift/import`
    }
    if (this.$route.path === '/devScene/configuration/processMode') {
      this.action = `${ksiot}/workorder/workorderDealType/import`
    } else if (this.$route.path === '/devScene/configuration/materialList') {
      this.action = `${ksiot}/workorder/workorderTool/import`
    } else if (this.$route.path === '/devBasic/earlierStage/pdebugging') {
      this.action = `${ksiot}/dms/dmsInstallPlan/importPlans?assetsNo=${this.assetsNo}`
    } else if (this.$route.path === '/devScene/maintain/project') {
      this.action = `${ksiot}/dms/dcmMaintainItem/import`
    } else if (this.$route.path === '/devScene/maintain/plan') {
      this.action = `${ksiot}/dms/dcmMaintainPlan/import`
    } else if (this.$route.path === '/spareParts/inventory/plan') {
      this.action = `${ksiot}/dms/dmsBackupPlan/import`
    } else if (this.$route.path === '/moldManagement/moldLedger') {//模具台账
      this.action = `${ksiot}/dms/moldinfo/import?type=insert`
    } else if (this.$route.path === '/moldManagement/moldMaintenance/items') {//模具管理-配置
      this.action = `${ksiot}/dms/servicingItem/import?type=insert`
    }

    if (this.url)
      this.action = this.url
  },
  methods: {
    onProgress(event, file, fileList) {
      console.log(event);
      this.uploadProgress = event.percent - 1;
      console.log(this.uploadProgress);
    },
    closeClick() {
      this.modalState = false
      this.$emit('importExcelChange')
    },
    beforeUpload(file) {
      this.uploadProgress = 1;
      this.uploadFile = file
      let reg = /\.(xlsx)|(xls)$/
      if (!this.uploadFile.name.toLowerCase().match(reg)) {
        this.$Message.warning(({content: "请上传excel文件！", duration: 6, closable: true}));
        this.uploadFiles = ''
        return false
      }
    },
    upload(res) {
      this.uploadProgress = 100;
      if (res.code == 200) {
        if (res.data && res.data.success) {
          this.modalState = false
        }
        this.$emit('importExcelChange', 'success')
        this.$emit('importExcelChangepub', res)
        // if (res.data.success){
        //   this.$Message.success(res.msg)
        // }
        if (res.data.messages && res.data.messages.length && !res.data.success) {
          this.$Message.success(({content: res.data.messages.join(','), duration: 6, closable: true}));
        } else {
          this.$Message.success({content: res.msg})
        }
      } else {
        if (res.data && res.data.errorInfo && res.data.errorInfo.length) {
          this.$Message.warning(({content: res.data.errorInfo.join(','), duration: 6, closable: true}));
        } else {
          if (res.data && res.data.messages && res.data.messages.length) {
            this.$Message.warning(({content: res.data.messages.join(','), duration: 6, closable: true}));
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        }

        // }
      }
    },
    uploadErro(response) {
      this.$Message.warning({content: response, duration: 6, closable: true})
    },
    infoCancel() {
      this.infoState = false
    },
  },
}
</script>

<style lang="scss">
.importExcelModal {
  .content {
    height: 380px;

    .upload {
      .importBtn {
        position: relative;
        width: 175px;
        margin: 0 auto;
        margin-top: 30px;
        text-align: center;

        img {
          width: 175px;
          height: 150px;
          margin-left: -35px;
          margin-bottom: 20px;
        }

        input {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }

        .ivu-upload:hover {
          border-color: #ffffff;
        }
      }

      span {
        display: block;
      }

      span {
        margin-bottom: 50px;
        font-size: 13px;
        text-align: center;
        line-height: 15px;
        color: #333;
      }
    }

    .uploadSucc,
    .uploadErr {
      text-align: center;

      i {
        margin-top: 70px;
        margin-bottom: 45px;
        font-size: 50px;
        color: #1294f7;
      }

      span {
        display: block;
        margin-bottom: 90px;
        font-size: 13px;
        line-height: 13px;

        a {
          position: relative;
          text-decoration: underline;
          color: #2296f4;

          input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
          }
        }
      }
    }

    .uploadErr {
      i {
        color: #ff3e68;
      }
    }

    .closeBtn {
      display: block;
      width: 140px;
      height: 40px;
      margin: 0 auto;
      margin-top: 30px;
      color: #333;
      background-color: #eee;
      cursor: pointer;
      border: 0px;
      font-size: 14px;
    }

    .closeBtn:hover {
      opacity: 0.8;
    }
  }

  &.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
      top: 0;
    }
  }

  .ivu-upload-drag {
    border-width: 1px;
    border-color: #fff;
  }

  .ivu-upload-drag:hover,
  .ivu-upload-dragOver {
    border-color: #2d8cf0;
  }

  .continue {
    display: inline-block;
    color: #2296f4;
    cursor: pointer;

    .con {
      text-decoration: underline;
      font-weight: normal;
    }
  }
}
</style>
